<template>
    <el-card class="card">
        <div class="title-container">
            <span class="rect"></span>
            <h3>基本信息</h3>
        </div>
        <el-divider></el-divider>
        <el-card class="carousel">
            <div class="block">
                <el-carousel height="220px" v-if="imageList.length" ref="carousel" indicator-position="none">
                    <el-carousel-item v-for="item in imageList" :key="item">
                        <img :src="item" alt="" width="100%" height="100%">
                        <div class="directive-container">
                            <div class="before-update" @click="handleBefore" v-if="landTableData.preUpdatePhoto">
                                更新前
                            </div>
                            <div class="after-update" @click="handleAfter" v-if="landTableData.updatedPhoto">
                                更新后
                            </div>
                        </div>
                    </el-carousel-item>
                </el-carousel>
                <el-empty v-else description="空空如也" style="height: 220px"></el-empty>
            </div>
        </el-card>

        <el-card class="info">
            <div class="desc">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ landTableData.brief }}
            </div>
            <div class="content">
                <div class="left">
                    <p>区域</p>
                    <p>企业地址</p>
                    <p>用地性质</p>
                    <p>用地类型</p>
                    <p>土地评估价格(万元)</p>
                    <p>占地面积(亩)</p>
                    <p>现有未建用地(亩)</p>
                    <p>未建设原因</p>
                    <p>现有建筑面积(㎡)</p>
                    <p>容积率</p>
                    <p>亩均税收(万元)</p>
                    <p>备注</p>
                    <p>土地证</p>
                    <p>房产证</p>
                </div>
                <div class="right">
                    <p>{{ lr_dataItemName(lr_dataItem['region_code'], landTableData.regionCode) || "---"
                    }}</p>
                    <p>{{ landTableData.address || "---" }}</p>
                    <p>{{ lr_dataItemName(lr_dataItem['original_land_properties_code'],
                        landTableData.originalLandPropertiesCode) || "---" }}</p>
                    <p>{{ lr_dataItemName(lr_dataItem['land_use_type_code'],
                        landTableData.landUseTypeCode) || "---" }}</p>
                    <p>{{ landTableData.evaluationPrice || "---" }}</p>
                    <p>{{ landTableData.coverArea || "---" }}</p>
                    <p>{{ landTableData.existingUnfinishedLand || "---" }}</p>
                    <p>{{ landTableData.existingUnfinishedReason || "---" }}</p>
                    <p>{{ landTableData.updatedBuildingArea || "---" }}</p>
                    <p>{{ landTableData.originalPlotRatio || "---" }}</p>
                    <p>{{ landTableData.muTax || "---" }}</p>
                    <p class="remark">{{ landTableData.remark || "无" }}</p>
                    <p>
                        <a v-if="landTableData.landCertificate" @click="openFile(landTableData.landCertificate)">查看</a>
                        <span v-else>--</span>
                    </p>
                    <p>
                        <a v-if="landTableData.ownershipCertificate"
                            @click="openFile(landTableData.ownershipCertificate)">查看</a>
                        <span v-else>--</span>
                    </p>
                </div>

                <l-dialog title="文件列表" width="400px" :modal="false" :hasBtns="false" :hasHeight="false" :hasMinBtn="true"
                    placement="bottom-right" :visible.sync="loadVisible" class="file-list-dialog">
                    <upload-file-list :uploadingFiles="uploadingFiles" :handleFilePreview="handleFilePreview" />
                </l-dialog>
                <l-dialog title="文件预览" :visible.sync="previewVisible" width="1000px" :height="800">
                    <div v-if="!isAllowed" class="tip-desc">该类型文件不支持预览，请下载文件预览</div>
                    <iframe v-else-if="previewUrl != ''" :src="previewUrl" class="l-iframe" ref="iframe"
                        frameborder="0"></iframe>
                    <template #btns>
                        <el-button size="mini" icon="el-icon-down" type="primary" @click="
                            downFile(`${previewFileId}`)
                            ">下载</el-button>
                    </template>
                </l-dialog>


            </div>
        </el-card>
    </el-card>
</template>


<script>
import UploadFileList from "@/core/components/upload-preview/lrUploadFileList.vue";
import imgPrevie from "@/core/util/imgPrevie.js"
export default {
    mixins: [imgPrevie()],
    data() {
        return {
            photoList: [],
            uploadingFiles: [],
            fileExt: "",
            loadVisible: false,
            uploadingFiles: [],
            previewFileId: "",
            previewUrl: "",
            previewVisible: false,
            imageList: [],
            preUpdateIndex: 0,
            updatedIndex: 0,
            tempUpdatedIndex: 0
        }
    },
    components: {
        UploadFileList
    },
    props: {
        landTableData: {
            type: Object,
            default: () => { }
        }
    },
    computed: {
        isAllowed() {
            return "pdf,png,jpg,jpeg".includes(this.fileExt)
        }
    },
    mounted() {
    },
    methods: {
        handleBefore() {
            this.$refs.carousel.setActiveItem(this.preUpdateIndex)
        },
        handleAfter() {
            this.$refs.carousel.setActiveItem(this.updatedIndex)
        },
        async getPhotoList() {
            this.preUpdateIndex = 0;
            this.updatedIndex = 0;
            let count = 0;
            this.photoList = [this.landTableData.preUpdatePhoto, this.landTableData.updatedPhoto]
            const imageList = []
            for (const i of this.photoList) {
                let list = await this.GET_FOLDER_IMG(i)
                if (count === 0) { // 更新前
                    this.preUpdateIndex = 0;
                    // 暂定更新后照片index接着更新前照片（更新后照片存在）
                    this.tempUpdatedIndex = list.length;
                    count++;
                } else if (count === 1) { // 更新后
                    if (list.length) {
                        this.updatedIndex = this.tempUpdatedIndex;
                    } else {
                        this.updatedIndex = this.tempUpdatedIndex - 1 <= 0 ? 0 : this.tempUpdatedIndex - 1
                    }
                }
                imageList.push(...list)
            }
            this.imageList = imageList;
        },
        async openFile(folderId) {
            this.uploadingFiles = []
            if (folderId) {
                const api = window.$crud(`system/annexesfile/${folderId}/list`);
                const list = await this.$awaitWraper(api.getInfo());
                if (list.length) {
                    this.uploadingFiles = list.map(t => {
                        const point = {
                            ...t
                        };
                        const fileIcon = this.lr_getFileIcon(t.name);

                        point.icon = fileIcon.icon;
                        point.color = fileIcon.color;
                        point.name = point.f_FileName;
                        point.uid = point.f_Id;
                        point.id = point.f_Id;
                        point.isSuccess = true;

                        return point;
                    });
                    this.loadVisible = true
                    return
                }
            }
            this.$message.error('未查询到可预览文件资源');
        },
        handleFilePreview(uid) {
            const file = this.uploadingFiles.find(t => t.uid == uid);
            this.handlePreview(file);
        },
        downFile(fileId) {
            this.$downFile(`${this.apiUrl}system/annexesfile/${fileId}?token=${this.token}`);
        },
        handlePreview(file) {
            // if (file.isPreview == false && !this.isImg) {
            //   this.$message({
            //     type: "warning",
            //     message: "级别不够，无权限预览！"
            //   });
            //   return;
            // }
            this.isFile = true
            const fileExt = file.name.split(".")[file.name.split(".").length - 1];
            console.log(fileExt);
            this.fileExt = fileExt;
            const fileId = file.id || file.response.fileId;
            switch (fileExt.toLowerCase()) {
                case "xls":
                case "xlsx":
                case "docx":
                case "doc":
                case "ppt":
                case "pptx":
                case "txt":
                case "csv":
                case "html":
                case "pdf":
                case "dxf":
                    this.isFile = true
                    if (this.$validatenull(this.apiUrl)) {
                        return;
                    }
                    this.previewUrl = `${this.apiUrl}system/annexesfile/preview/${fileId}?token=${this.token}`;
                    this.previewFileId = fileId;
                    this.previewVisible = true;
                    break;
                case "jpg":
                case "gif":
                case "png":
                case "bmp":
                case "jpeg":
                case "svg":
                    this.isFile = false
                    if (this.isImg) {
                        if (file.url) {
                            this.previewUrl = file.url;
                        } else {
                            if (this.$validatenull(this.apiUrl)) {
                                return;
                            }
                            this.previewUrl = `${this.apiUrl}system/annexesfile/preview/${fileId}?token=${this.token}`;
                        }
                        this.previewVisible = true;
                    } else {
                        if (this.$validatenull(this.apiUrl)) {
                            return;
                        }
                        this.previewUrl = `${this.apiUrl}system/annexesfile/preview/${fileId}?token=${this.token}`;
                        this.previewFileId = fileId;
                        this.previewVisible = true;
                        break;
                    }

                    break;
                default:
                    // 不支持预览，就直接下载
                    // this.$message.warning(`当前文件格式不支持预览${fileExt}`);
                    // if (this.$validatenull(this.apiUrl)) {
                    //     return;
                    // }
                    // this.$downFile(`${this.apiUrl}system/annexesfile/${fileId}?token=${this.token}`);
                    break;
            }
        },
    }
}
</script>



<style scoped lang='scss'>
.file-list-dialog {
    padding-left: 300px;
    padding-top: 200px;
}

.info {
    height: 100%;

    .desc {
        margin-bottom: 15px;
        font-size: 14px;
        max-height: 144px;
        font-family: SourceHanSansCN-Regular;
        color: rgba(30, 53, 104, 1);

        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 7;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
}

.card {
    display: flex;
    flex-direction: column;
    margin-top: 5px;
}


.content {
    display: flex;
    font-size: 14px;
    font-family: SourceHanSansCN-Regular;
    gap: 5px 15px;

    .left {
        flex: 1;
        text-align: right;

        p {
            height: 24px;
            line-height: 24px;
        }
    }

    .right {
        flex: 1;
        text-align: left;

        p {
            height: 24px;
            line-height: 24px;
        }

        p.remark {
            white-space: nowrap;
            width: 130px;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
}

::v-deep .el-card .el-card__body {
    padding: 5px;
}

::v-deep .el-divider--horizontal {
    margin: 5px 0;
}

.tip-desc {
    width: 90%;
    height: 40px;
    box-sizing: border-box;
    line-height: 40px;
    border: 1px solid #ffe9a2;
    margin: 0 auto;
    margin-top: 20px;
    padding-left: 20px;
    background-color: #fffbe6;
    display: flex;
    align-items: center;

    .icon {
        display: flex;
        align-items: center;
        margin-right: 5px;
    }
}


.directive-container {
    height: 30px;
    width: 100px;
    background-color: rgba(35, 38, 37, .5);
    font-size: 12px;
    border: 1px solid rgba($color: #fff, $alpha: 0.8);
    box-sizing: content-box;
    border-radius: 10px;
    text-align: center;
    margin-top: -50px;
    margin-left: 50%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    transform: translateX(-50%);
    color: white;

    .before-update {
        cursor: pointer;
    }

    .after-update {
        cursor: pointer;
    }
}
</style>